<template>
  <div>
    <el-form class="detail-form-content" ref="ruleForm" :model="ruleForm" label-width="80px">
      <el-row>
        <el-col :span="6">
          <el-form-item v-if="flag == 'yonghu'" label='头像' prop="yonghuPhoto">
            <file-upload tip="点击上传照片" action="file/upload" :limit="1" :multiple="false"
              :fileUrls="ruleForm.yonghuPhoto ? ruleForm.yonghuPhoto : ''" @change="yonghuPhotoUploadChange"></file-upload>
          </el-form-item>
        </el-col>
        <el-col :span="18">
          <el-row>
            <el-col :span="10">
              <el-form-item v-if="flag == 'yonghu'" label='用户姓名' prop="yonghuName">
                <el-input v-model="ruleForm.yonghuName" placeholder='用户姓名' clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item v-if="flag != 'users'" label="性别" prop="sexTypes">
                <el-select v-model="ruleForm.sexTypes" placeholder="请选择性别">
                  <el-option v-for="(item) in sexTypesOptions" v-bind:key="item.codeIndex" :label="item.indexName"
                    :value="item.codeIndex">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item v-if="flag == 'yonghu'" label='联系方式' prop="yonghuPhone">
                <el-input v-model="ruleForm.yonghuPhone" placeholder='联系方式' clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item v-if="flag == 'yonghu'" label='身份证号' prop="yonghuIdNumber">
                <el-input v-model="ruleForm.yonghuIdNumber" placeholder='用户身份证号' clearable></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item v-if="flag == 'yonghu'" label='电子邮箱' prop="yonghuEmail">
                <el-input v-model="ruleForm.yonghuEmail" placeholder='邮箱' clearable></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item v-if="flag == 'users'" label="用户名" prop="username">
            <el-input v-model="ruleForm.username" placeholder="用户名"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item style="margin-left: 25%; margin-top: 20px;">
            <el-button type="primary" @click="onUpdateHandler">修 改</el-button>
            <el-button style="margin-left: 30px;" @click="resetForm">重 置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
// 数字，邮件，手机，url，身份证校验
import { isNumber, isIntNumer, isEmail, isMobile, isPhone, isURL, checkIdCard } from "@/utils/validate";

export default {
  data() {
    return {
      ruleForm: {},
      originalForm: {}, // 保存初始数据
      flag: '',
      usersFlag: false,
      // sexTypesOptions : [],
      // 注册表 用户
      // 注册的类型字段 用户
      // 性别
      sexTypesOptions: [],
    };
  },
  mounted() {
    //获取当前登录用户的信息
    var table = this.$storage.get("sessionTable");
    this.sessionTable = this.$storage.get("sessionTable");
    this.role = this.$storage.get("role");
    console.log('当前登录用户信息:', {
        sessionTable: table,
        role: this.role
    });
    
    this.flag = table;
    this.$http({
      url: `${this.$storage.get("sessionTable")}/session`,
      method: "get"
    }).then(({ data }) => {
      if (data && data.code === 0) {
        this.ruleForm = data.data;
        this.originalForm = JSON.parse(JSON.stringify(data.data)); // 深拷贝保存初始数据
        console.log('获取到的用户详细信息:', this.ruleForm);
        
        // 注册表 用户
      } else {
        console.error('获取用户信息失败:', data.msg);
        this.$message.error(data.msg);
      }
    });

    // 注册表 用户 的级联表

    this.$http({
      url: `dictionary/page?page=1&limit=100&sort=&order=&dicCode=sex_types`,
      method: "get"
    }).then(({ data }) => {
      if (data && data.code === 0) {
        this.sexTypesOptions = data.data.list;
      } else {
        this.$message.error(data.msg);
      }
    });
  },
  methods: {
    yonghuPhotoUploadChange(fileUrls) {
      this.ruleForm.yonghuPhoto = fileUrls;
    },
    // 重置表单
    resetForm() {
      this.ruleForm = JSON.parse(JSON.stringify(this.originalForm));
      this.$message({
        message: "重置成功",
        type: "success",
        duration: 1500
      });
    },
    onUpdateHandler() {
      if ((!this.ruleForm.yonghuName) && 'yonghu' == this.flag) {
        this.$message.error('用户姓名不能为空');
        return
      }

      if ((!this.ruleForm.yonghuPhoto) && 'yonghu' == this.flag) {
        this.$message.error('头像不能为空');
        return
      }

      if ((!this.ruleForm.yonghuPhone) && 'yonghu' == this.flag) {
        this.$message.error('联系方式不能为空');
        return
      }

      if ((!this.ruleForm.yonghuIdNumber) && 'yonghu' == this.flag) {
        this.$message.error('用户身份证号不能为空');
        return
      }

      if ('yonghu' == this.flag && this.ruleForm.yonghuEmail && (!isEmail(this.ruleForm.yonghuEmail))) {
        this.$message.error(`邮箱应输入邮箱格式`);
        return
      }
      if ((!this.ruleForm.sexTypes) && this.flag != 'users') {
        this.$message.error('性别不能为空');
        return
      }
      if ('users' == this.flag && this.ruleForm.username.trim().length < 1) {
        this.$message.error(`用户名不能为空`);
        return
      }
      this.$http({
        url: `${this.$storage.get("sessionTable")}/update`,
        method: "post",
        data: this.ruleForm
      }).then(({ data }) => {
        if (data && data.code === 0) {
          // 更新初始数据
          this.originalForm = JSON.parse(JSON.stringify(this.ruleForm));
          this.$message({
            message: "修改信息成功，将在下次登录时生效",
            type: "success",
            duration: 1500
          });
        } else {
          this.$message.error(data.msg);
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped></style>
